<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,maximum-scale=1">
		<title>H5移动端选择器</title>
		<link rel="stylesheet" href="css/lay-picker.min.css" />
	</head>
	<style>
		#app{
			padding: 20px;
		}
		#app>div{
			margin-bottom: 10px;
		}
		
		input{
			border: 1px solid #1E90FF;
			border-radius: 4px;
			height: 30px;
			line-height: 30px;
			outline: none;
			min-width: 200px;
			padding-left: 10px;
		}
		input:hover,
		input:focus{
			border: 1px solid #1E90FF;
			box-shadow: #1e90ff30 0 0 0 4px;
		}
		
	</style>
	<body>
		<div id="app">
			<h2>日期选择器</h2>
			<div>
				选择年份：<input type="text" id="year" autocomplete='off'/>
			</div>
			<div>
				选择年月：<input type="text" id="month" autocomplete='off'/>
			</div>
			<div>
				选择日期：<input type="text" id="date" autocomplete='off'/>
			</div>
			<div>
				时间到分：<input type="text" id="time" autocomplete='off'/>
			</div>
			<div>
				时间到秒：<input type="text" id="time2" autocomplete='off'/>
			</div>
			<div>
				日期时间：<input type="text" id="datetime" autocomplete='off'/>
			</div>
			<div>
				日期时间到秒：<input type="text" id="datetime2" autocomplete='off'/>
			</div>
			<h2>地区级联选择</h2>
			<div>
				所在地区：<input type="text" id="addr" autocomplete='off'/>
			</div>
			<h2>其他说明</h2>
			<div>
				动态调整：<input type="text" id="trends" autocomplete='off'/>
			</div>
			<div>
				指定字段：<input type="text" id="field" autocomplete='off'/>
			</div>
			<div>
				圆角设置：<input type="text" id="radius" autocomplete='off' />
			</div>
			<div>
				赋值设置：<input type="text" id="val" autocomplete='off'/>
			</div>
			<div style="margin: 20px 0;">
				<a class="lay-picker-bottom-btn lay-picker-bottom-btn-confirm" style="width: 120px;text-align: center;" href="index-new.html">前往微信样式</a>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
	<script type="text/javascript" src="js/lay-picker.min.js"></script>
	<script>
		//-----------------------------------------------------------------------------------------------------------------
		//	【1】
		//-----------------------------------------------------------------------------------------------------------------
		// 选择年份
		var date_obj = lay_picker_date.getDateTime();// 获取当前每个时间
		layPicker.init({
			elem: '#year', // 绑定元素
			options: 'year', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
				layPicker.setValue(index, [
					{value: '2023'},
				])
			},
			onSelect: function(result){
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#year").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择年月
		layPicker.init({
			elem: '#month', // 绑定元素
			options: 'month', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
				layPicker.setValue(index, [
					{value: 2025},
					{value: 10},
				])
			},
			onSelect: function(result){
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#month").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择日期
		layPicker.init({
			elem: '#date', // 绑定元素
			options: 'date', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
				layPicker.setValue(index, [ // 赋值，以位置类推
					{value: date_obj.year},
					{value: date_obj.month},
					{value: date_obj.day}, 
				])
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#date").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择时间
		layPicker.init({
			elem: '#time', // 绑定元素
			options: 'time', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#time").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		var secondss = lay_picker_date.getSeconds();
		// 选择时间-到秒
		layPicker.init({
			elem: '#time2', // 绑定元素
			options: 'timesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#time2").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择日期时间
		layPicker.init({
			elem: '#datetime', // 绑定元素
			options: 'datetime', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#datetime").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 选择日期时间到秒
		layPicker.init({
			elem: '#datetime2', // 绑定元素
			options: 'datetimesecond', // 设置为日期选择器（日期选择器可设置：year、month、date、time、timesecond、datetime、datetimesecond），不设置默认取data作为选择值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#datetime2").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		//	【2】
		//-----------------------------------------------------------------------------------------------------------------
		var addr_array = [{
				name: '北京',
				value: "110000",
			},{
				name: '广东',
				value: "440000",
			},
		]
		var addr_array_bj = [
			{
				name: '东城区',
				value: "110001",
			}, {
				name: '西城区',
				value: "110002",
			}, {
				name: '朝阳区',
				value: "110003",
			}, {
				name: '丰台区',
				value: "110004",
			}, {
				name: '海淀区',
				value: "110005",
			}, {
				name: '房山区',
				value: "110006",
			}
		];
		var addr_array_gd = [
			{
				name: '东莞市',
				value: "440301",
			},{
				name: '广州市',
				value: "440100",
			},{
				name: '深圳市',
				value: "440200",
			},
		]
		var add_array_gd_sz = [
			{
				name: '罗湖区',
				value: "440201",
			}, {
				name: '南山区',
				value: "440202",
			}, {
				name: '福田区',
				value: "440203",
			}, {
				name: '龙华新区',
				value: "440204",
			}, {
				name: '龙岗区',
				value: "440205",
			}, {
				name: '宝安区',
				value: "440206",
			}
		]
		var add_array_gd_dg = [
			{
				name: '寮步镇',
				value: "440301",
			}, {
				name: '茶山镇',
				value: "440302",
			}, {
				name: '长安镇',
				value: "440303",
			},
		]
		// 选择地区
		layPicker.init({
			elem: '#addr', // 绑定元素
			data: [addr_array, addr_array_bj, []], // 列数值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				if(i == 0){
					if(result[i].name == '北京'){
						layPicker.setData(index, i, addr_array_bj);
					}else if(result[i].name == '广东'){
						layPicker.setData(index, i, addr_array_gd);
						layPicker.setData(index, i+1, add_array_gd_dg);
					}
				}else if(i == 1){
					if(result[i].name == '深圳市'){
						layPicker.setData(index, i, add_array_gd_sz);
					}else if(result[i].name == '东莞市'){
						layPicker.setData(index, i, add_array_gd_dg);
					}else{
						layPicker.setData(index, i, []);
					}
				}
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				//结果处理后再显示
				var text = [];
				for(var i = 0; i < result.length; i++) {
					text.push(result[i].name);
				}
				$("#addr").val(text.join('-'))
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		
		//-----------------------------------------------------------------------------------------------------------------
		//	【3】
		//-----------------------------------------------------------------------------------------------------------------
		// 动态调整
		layPicker.init({
			elem: '#trends', // 绑定元素
			data: [addr_array], // 列数值（使用动态这里可以不用占位）
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				if(i == 0){
					if(result[i].name == '北京'){
						layPicker.setDataTrends(index, i, addr_array_bj);
					}else if(result[i].name == '广东'){
						layPicker.setDataTrends(index, i, addr_array_gd);
						layPicker.setDataTrends(index, i+1, add_array_gd_dg);
					}
				}else if(i == 1){
					if(result[i].name == '深圳市'){
						layPicker.setDataTrends(index, i, add_array_gd_sz);
					}else if(result[i].name == '广州市'){
						layPicker.setDataTrends(index, i, null);
					}else if(result[i].name == '东莞市'){
						layPicker.setDataTrends(index, i, add_array_gd_dg);
					}
				}
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				//结果处理后再显示
				var text = [];
				for(var i = 0; i < result.length; i++) {
					text.push(result[i].name);
				}
				$("#trends").val(text.join('-'))
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		var field_arr = [
			{
				title: '张三',
				id: 101,
			},{
				title: '李四',
				id: 102,
			},{
				title: '王五',
				id: 103,
			},
		]
		// 指定字段
		layPicker.init({
			elem: '#field', // 绑定元素
			data: [field_arr],
			textField: 'title',
			valueField: 'id',
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#field").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 圆角
		layPicker.init({
			elem: '#radius', // 绑定元素
			data: [field_arr],
			textField: 'title',
			valueField: 'id',
			radius: 15, // 默认无圆角，设置圆角值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#radius").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
		})
		//-----------------------------------------------------------------------------------------------------------------
		// 赋值
		var layIndex = layPicker.init({
			elem: '#val', // 绑定元素
			data: [field_arr],
			textField: 'title',
			valueField: 'id',
			radius: 15, // 默认无圆角，设置圆角值
			onSuccess: function(index, elem){ // 渲染成功回调
			},
			onSelect: function(index, i, result){ // 停止滚动触发：index是当前对象的标识， i 是当前滑动的下标对象，result是前面的值集
				console.log('onSelect --- ', JSON.stringify(result))
			},
			onConfirm: function(index, value, result){ // 点击确认回调
				$("#val").val(value)
				console.log('onConfirm --- ', index, '---', value, '----', JSON.stringify(result))
			},
			onCancel: function(index){ // 点击取消回调
			},
			onShade: function(index){ // 点击遮罩回调
			},
			onShow: function(index){ // 点击显示回调
				layPicker.setValue(index, [{id: 102}]);
			},
		})
		
		// 删除指定
		//layPicker.remove(layIndex);
		// 删除所有
		//layPicker.removeAll();
		
	</script>

</html>